<template>
    <view class="actionsheet">
        <!-- 遮罩层 -->
        <view class="actionsheet-bg" v-if="actionData.showAction&&actionData.show" @tap='closeActionSheet'></view>
        <!-- 上拉内容 -->
        <view class="actionsheet-content" :style='{"height":actionHeight,"transform":actionData.showAction?"translate3d(0,0,0)":"translate3d(0,100%,0)"}'>
            <slot></slot>
        </view>
    </view>
</template>

<script>
/**
 * 1. 需要传入高度 height
 * 2. 开启的标志showAction
 */
export default {
    props:{
        actionData:Object,
        currentStep:Number
    },
    data() {
        return {
            showAction:this.actionData.showAction,
            height:this.actionData.actionHeight
        }
    },
    computed: {
        actionHeight() {
            return uni.upx2px(this.actionData.actionHeight) + 'px';
        },
    },
    methods: {
        closeActionSheet() {
            this.showAction = false;
            this.$emit('actionStatus',{showAction:this.showAction,height:this.height});
        }
    },
    watch:{
        currentStep(val){
            this.currentStep = val
        }
    }
}
</script>

<style lang="scss" scoped>
    .actionsheet {
        &-bg {
            position: fixed;
            height: 1000%;
            width: 100%;
            top: 0;
            background-color: rgba(0,0,0,.2);
        }
        &-content {
            transition: 0.35s;
            position: fixed;
            height: 0;
            width: 100%;
            bottom: 0;
            background-color: #FFFAEC;
            border-radius: 32upx 32upx 0 0;
            box-sizing: border-box;
            z-index: 1;
        }
        &-close {
            width: 120upx;
            height: 120upx;
            position: absolute;
            right: 5upx;
            top: -5upx;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        .stepAnimate{
            transition: 1.5s;
            box-shadow: 0 1284rpx 0 1280rpx rgba(0, 0, 0, 0.8)
        }
        .actionsheet-img{
            width: 28rpx;
            height: 28rpx;
        }
    }
</style>